/* Copyright (c) 2024 Huawei Technologies Co., Ltd.
openFuyao is licensed under Mulan PSL v2.
You can use this software according to the terms and conditions of the Mulan PSL v2.
You may obtain a copy of Mulan PSL v2 at:
         http://license.coscl.org.cn/MulanPSL2
THIS SOFTWARE IS PROVIDED ON AN 'AS IS' BASIS, WITHOUT WARRANTIES OF ANY KIND,
EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
See the Mulan PSL v2 for more details. */

import '@/styles/PriorityClass.less'
import { MoreOutlined } from '@ant-design/icons';
import { Input, Table, ConfigProvider, Space, Popover, Button, message } from 'antd'
import zhCN from 'antd/es/locale/zh_CN';
import { Link, useHistory } from 'inula-router';
import { useEffect, useState } from 'openinula';
import BreadCrumbCom from '@/components/BreadCrumbCom';
import { getPriorityClassesList, deleteSpecifiedPriorityClasses } from '@/api/schedulingApi';
import DeleteInfoModal from '@/components/DeleteInfoModal';
import { ResponseCode } from '@/common/constants';
import { sortNaN, sorterFirstAlphabet } from '@/tools/utils';

export default function PriorityClass() {
  const [messageApi, contextHolder] = message.useMessage();
  const { Search } = Input;
  const [popOpen, setPopOpen] = useState('');
  const history = useHistory();
  const [dataSource, setDatatSource] = useState([]);
  const [priorityModalOpen, setPriorityModalOpen] = useState(false); // 删除对话框展示
  const [isPriorityDelCheck, setIsPriorityDelCheck] = useState(false); // 是否选中
  const [priorityName, setPriorityDelName] = useState(''); // 删除的名称
  const [current, setCurrent] = useState(1)
  const columns = [
    {
      title: 'PriorityClass名称',
      dataIndex: 'name',
      key: 'name',
      sorter: (a, b) => sorterFirstAlphabet(a.metadata.name, b.metadata.name),
      render: (_, record) => (
        <div>
          <Link to={`/SchedulingPolicyConfiguration/PriorityClassDetails/?priorityName=${record.metadata.name}&isEdit=${false}`}>{record.metadata.name}</Link>
        </div>
      )
    },
    {
      title: '优先级',
      dataIndex: 'priority',
      key: 'priority',
      sorter: (a, b) => a.value - b.value,
      render: (_, record) => record.value
    },
    {
      title: '是否为默认优先级',
      dataIndex: 'globalDefault',
      key: 'globalDefault',
      filters: [
        { text: '是', value: '是' },
        { text: '否', value: '否' },
      ],
      onFilter: (value, record) => {
        const isDefault = record.globalDefault ? '是' : '否';
        return isDefault === value;
      },
      render: (_, record) => record.globalDefault ? '是' : '否'
    },
    {
      title: '操作',
      key: 'handle',
      fixed: 'right',
      width: 100,
      render: (_, record) => (
        <Space>
          <Popover
            getPopupContainer={() => document.getElementById('priorityList')}
            placement='bottom'
            className='warehouseConfiguration'
            content={
              <div className='pop_modal'>
                <Button type='link'>
                  <Link to={`/SchedulingPolicyConfiguration/PriorityClassUpdate/?priorityName=${record.metadata.name}&isEdit=true`}>修改</Link>
                </Button>
                <Button type='text' onClick={() => handleDeletePriorityIndex(record.metadata.name)}>删除</Button>
              </div>
            }
            trigger='click' btn_
            open={popOpen === `${record.metadata.name}`}
            onOpenChange={(newOpen) =>
              newOpen ? setPopOpen(record.metadata.name) : setPopOpen('')
            }
          >
            <MoreOutlined className='common_antd_icon primary_color warehouseConfiguration' />
          </Popover>
        </Space>
      ),
    },
  ];

  const getPriorityClassesListInfo = async (name) => {
    const res = await getPriorityClassesList();
    if (name) {
      const filteredData = res.data.items.filter(item => item.metadata.name.toLowerCase().includes(name.toLowerCase()))
      setDatatSource(filteredData);
    } else {
      setDatatSource(res.data.items);
    }
  };

  const handlePriorityCheckFn = (e) => {
    setIsPriorityDelCheck(e.target.checked);
  };

  // 取消删除
  const handleDelCancelPriorityIndex = () => {
    setPriorityModalOpen(false);
    setPriorityDelName('');
  };

  const handleDelPriorityConfirm = async () => {
    try {
      const resPriorityClass = await deleteSpecifiedPriorityClasses(priorityName);
      if (resPriorityClass.status === ResponseCode.OK) {
        message.success('删除成功！');
        setPriorityModalOpen(false);
        setIsPriorityDelCheck(false);
        setPriorityDelName('');
        getPriorityClassesListInfo();
      }
    } catch (error) {
      if (error.response.status === 403) {
        message.error('操作失败，当前用户没有操作权限，请联系管理员添加权限!');
      } else {
        message.error(error.response?.data.message);
      }
    }
  };

  const handleSearch = (e) => {
    getPriorityClassesListInfo(e);
  };

  // 删除按钮
  const handleDeletePriorityIndex = (name) => {
    // 隐藏气泡框
    setPopOpen('');
    setPriorityModalOpen(true); // 打开弹窗
    setPriorityDelName(name);
    setIsPriorityDelCheck(false);
  };

  const handlePageChange = (page, pageSize) => {
    setCurrent(page); // 更新当前页码
  };

  useEffect(() => {
    getPriorityClassesListInfo();
  }, [])
  return (
    <div className='priority_class_container' id='priorityList'>
      <div style={{ marginBottom: '20px' }}>
        <BreadCrumbCom items={[
          { title: '调度策略配置', disabled: true },
          { title: 'PriorityClass', path: '/SchedulingPolicyConfiguration/PriorityClass' },
        ]} />
      </div>
      <div className='priority-out-box' style={{ display: 'flex', flexDirection: 'column', padding: '32px 32px 16px 32px', height: 'calc(100vh - 64px - 54px - 20px - 32px - 48px - 2px)', margin: '0px 32px 20px 20px' }}>
        <div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'space-between' }}>
          <Search placeholder='请输入PriorityClass名称' style={{ width: '300px' }} onSearch={handleSearch} />
          <Button className="primary_btn" onClick={() => history.push('/SchedulingPolicyConfiguration/createPriority')}>
            创建
          </Button>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', flex: '1' }}>
          <ConfigProvider locale={zhCN}>
            <Table
              className='tab_table_flex'
              dataSource={dataSource}
              pagination={{
                className: 'volcano-page',
                current,
                pageSizeOptions: [10, 20, 50],
                showSizeChanger: true,
                showQuickJumper: true,
                onChange: handlePageChange,
                hideOnSinglePage: false, // 添加这一行来强制显示分页
                showTotal: () => `共${dataSource.length}条`,
              }}
              columns={columns} />
          </ConfigProvider>
        </div>
      </div>
      <DeleteInfoModal
        title='删除PriorityClass'
        className='PriorityClass'
        open={priorityModalOpen}
        cancelFn={handleDelCancelPriorityIndex}
        content={[
          '删除后将无法恢复，请谨慎操作。',
          `确定删除 ${priorityName} 吗？`,
        ]}
        showCheck={true}
        checkFn={handlePriorityCheckFn}
        isCheck={isPriorityDelCheck}
        confirmFn={handleDelPriorityConfirm}
      />
    </div>
  )
}